<script setup lang="ts">
import { CircleClose } from '@element-plus/icons-vue';
import { computed, onMounted, ref, watch } from 'vue';

const clearIcon = CircleClose;

interface TimeSpanSelectProps {
    clearable?: boolean
    readonly?: boolean
    disabled?: boolean,
    precision?: 'day' | 'hour' | 'minute' | 'second',
}

const model = defineModel<string>({ default: '0.00:00:00' })
const props = defineProps<TimeSpanSelectProps>()
const showClose = ref(false);

onMounted(() => {
    if (!model.value) {
        return;
    }

    let resultsWithDay = model.value.match(/^([-]?)(([\d]+)\.)?([\d]{0,2}):([\d]{0,2}):([\d]{0,2})/)
    if (resultsWithDay) {
        const _n = resultsWithDay[0]
        isNegativeValue.value = _n === '-'
        const _d = resultsWithDay[3]
        dayValue.value = parseInt(_d || '0')
        const _h = resultsWithDay[4]
        hourValue.value = parseInt(_h || '0')
        const _m = resultsWithDay[5]
        minuteValue.value = parseInt(_m || '0')
        const _s = resultsWithDay[6]
        secondValue.value = parseInt(_s || '0')

        console.log('timespan', _d, _h, _m, _s)

        return;
    }
})

const onClearIconClick = () => {
    if (props.readonly || props.disabled) return;

    dayValue.value = 0;
    hourValue.value = 0;
    minuteValue.value = 0;
    secondValue.value = 0
}
const pickerVisible = ref(false)

const isNegativeValue = ref(false)
const isNegativeDispalyValue = computed(() => {
    return isNegativeValue.value ? '-' : ''
})
const dayValue = ref(0)
const dayDisplayValue = computed(() => {
    return `${dayValue.value ?? 0}`;
})
const hourValue = ref(0)
const hourDisplayValue = computed(() => {
    return `0${hourValue.value ?? 0}`.slice(-2)
})
const minuteValue = ref(0)
const minuteDisplayValue = computed(() => {
    return `0${minuteValue.value ?? 0}`.slice(-2)
})
const secondValue = ref(0)
const secondDisplayValue = computed(() => {
    return `0${secondValue.value ?? 0}`.slice(-2)
})

const displayValue = computed(() => {
    return `${isNegativeDispalyValue.value}${(dayValue.value != 0 ? dayDisplayValue.value + '.' : '')}${hourDisplayValue.value}:${minuteDisplayValue.value}:${secondDisplayValue.value}`
})

const handleFocusInput = () => {
    pickerVisible.value = true
}

const handleBlurInput = () => {
    pickerVisible.value = false
}

const updateModelValue = () => {
    model.value = `${dayValue.value}.${hourValue.value}:${minuteValue.value}:${secondValue.value}`
}

watch(dayValue, () => {
    updateModelValue();
})

watch(hourValue, () => {
    updateModelValue();
})

watch(minuteValue, () => {
    updateModelValue();
})

watch(secondValue, () => {
    updateModelValue();
})

const onMouseEnter = () => {
    if (props.readonly || props.disabled) return;
    if (props.clearable) {
        showClose.value = true
    }
}

const onMouseLeave = () => {
    showClose.value = false
}
</script>

<template>
    <ElTooltip trigger="click" effect="light" teleported>
        <template #default>
            <ElInput @focus="handleFocusInput" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @blur="handleBlurInput"
                :model-value="displayValue">
                <template #prefix>
                    <ElIcon>
                        <Clock />
                    </ElIcon>
                </template>

                <template #suffix>
                    <ElIcon v-if="showClose" class="el-icon el-input__icon el-input__clear" @click="onClearIconClick">
                        <component :is="clearIcon"></component>
                    </ElIcon>
                </template>
            </ElInput>
        </template>
        <template #content>
            <div style="height: 50px;">
                <ElSpace class="timespan-input-group">
                    <ElSwitch v-model="isNegativeValue" inline-prompt active-text="负" inactive-text="正">
                    </ElSwitch>
                    <ElInputNumber class="timespan-input timespan-input__day" :step="1" :min="-99" :max="99"
                        :controls="false" v-model="dayValue">
                    </ElInputNumber>
                    <ElText>天</ElText>
                    <ElInputNumber class="timespan-input timespan-input__hour" :step="1" :min="0" :max="23"
                        :controls="false" v-model="hourValue">
                    </ElInputNumber>
                    <ElText>时</ElText>
                    <ElInputNumber class="timespan-input timespan-input__minute" :step="1" :min="0" :max="59"
                        :controls="false" v-model="minuteValue">
                    </ElInputNumber>
                    <ElText>分</ElText>
                    <ElInputNumber class="timespan-input timespan-input__second" :step="1" :min="0" :max="59"
                        :controls="false" v-model="secondValue">
                    </ElInputNumber>
                    <ElText>秒</ElText>
                </ElSpace>
            </div>
        </template>
    </ElTooltip>
</template>

<style scoped>
.timespan-input-group {
    width: 100%;
}
.timespan-input-group .timespan-input {
    width: 20%;
    min-width: 50px;
}</style>